<template>
  <el-dialog :width="800" destroy-on-close draggable :title="dialogTitle" v-model="dialogFormVisible">
    <el-form :model="formParam" :rules="rules" ref="custForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="Supplier Code" label-width="120px" prop="supplierCode" required>
            <el-input v-model="formParam.supplierCode" placeholder="Supplier Code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Full Name" label-width="120px" prop="fullName" required>
            <el-input v-model="formParam.fullName" placeholder="Full Name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Phone" label-width="120px" prop="phone"   required>
            <el-input v-model="formParam.phone" placeholder="phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ROLE/TYPE" label-width="120px" prop="supplierType" required>
            <el-select v-model="formParam.supplierType" filterable clearable allow-create style="width: 100%"
              placeholder="Select orgnizationType">
              <el-option v-for="item in orgnization_type" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="fax" label="FAX" label-width="120px">
            <el-input v-model="formParam.fax" placeholder="FAX"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="email" label="EMAIL" label-width="120px">
            <el-input v-model="formParam.email" placeholder="EMAIL"></el-input>
          </el-form-item>
        </el-col>
      </el-row>  
      <div class="card-content">
        <el-tabs type="border-card">
          <el-tab-pane label="Info">
            <el-row>
              <el-col :span="24">
                <el-tabs type="border-card" tabPosition="bottom">
                  <el-tab-pane label="Post">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="postCountry" label="COUNTRY" label-width="140px"> 
                          <el-select v-model="formParam.postCountry" filterable placeholder="choose COUNTRY" clearable>
                            <el-option :key="item.countryName" :label="item.countryName" :value="item.countryName"
                              v-for="item in countrys">
                            </el-option>
                          </el-select>  
                        </el-form-item>
                        <el-form-item prop="postAddress" label="POST ADDRESS" label-width="140px">
                          <el-input class="address-input" v-model="formParam.postAddress" type="textarea"
                            placeholder="POST ADDRESS"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="postState" label="STATE/PROVINCE" label-width="140px">
                          <el-input v-model="formParam.postState" placeholder="STATE/PROVINCE"></el-input>
                        </el-form-item>
                        <el-form-item prop="postZipCode" label="ZIP/POSTAL CODE" label-width="140px">
                          <el-input v-model="formParam.postZipCode" placeholder="ZIP/POSTAL CODE"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Visit">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="visitCountry" label="COUNTRY" label-width="140px"> 
                          <el-select v-model="formParam.visitCountry" filterable placeholder="choose COUNTRY" clearable>
                            <el-option :key="item.countryName" :label="item.countryName" :value="item.countryName"
                              v-for="item in countrys">
                            </el-option>
                          </el-select>  
                        </el-form-item>
                        <el-form-item prop="visitAddress" label="VISIT ADDRESS" label-width="140px">
                          <el-input class="address-input" v-model="formParam.visitAddress" type="textarea"
                            placeholder="VISIT ADDRESS"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="visitState" label="STATE/PROVINCE" label-width="140px">
                          <el-input v-model="formParam.visitState" placeholder="STATE/PROVINCE"></el-input>
                        </el-form-item>
                        <el-form-item prop="visitZipCode" label="ZIP/POSTAL CODE" label-width="140px">
                          <el-input v-model="formParam.visitZipCode" placeholder="ZIP/POSTAL CODE"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Invoice">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="invoiceCountry" label="COUNTRY" label-width="140px">
                          <el-select v-model="formParam.invoiceCountry" filterable placeholder="choose COUNTRY" clearable>
                            <el-option :key="item.countryName" :label="item.countryName" :value="item.countryName"
                              v-for="item in countrys">
                            </el-option>
                          </el-select>  
                        </el-form-item>
                        <el-form-item prop="invoiceAddress" label="INVOICE ADDRESS" label-width="140px">
                          <el-input class="address-input" v-model="formParam.invoiceAddress" type="textarea"
                            placeholder="INVOICE ADDRESS"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="invoiceState" label="STATE/PROVINCE" label-width="140px">
                          <el-input v-model="formParam.invoiceState" placeholder="STATE/PROVINCE"></el-input>
                        </el-form-item>
                        <el-form-item prop="invoiceZipCode" label="ZIP/POSTAL CODE" label-width="140px">
                          <el-input v-model="formParam.invoiceZipCode" placeholder="ZIP/POSTAL CODE"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="Contacts">
            <div style=" text-align: right; margin: 10px">
              <el-button type="primary" size="small" @click="addContact">Add </el-button>
            </div>
			<div style="clear:both;height:10px;overflow:hidden">&nbsp;</div>

            <el-table stripe class="daf-table" :data="formParam.contacts" style="width: 100%">
              <el-table-column prop="name" label="Name">
                <template #default="scope">
                  <el-input v-model="scope.row.name" />
                </template>
              </el-table-column>
              <el-table-column prop="title" label="title">
                <template #default="scope">
                  <el-input v-model="scope.row.title" />
                </template>
              </el-table-column>

              <el-table-column prop="phone" label="Phone">
                <template #default="scope">
                  <el-input v-model="scope.row.phone" />
                </template>
              </el-table-column>
              <el-table-column prop="email" label="Email">
                <template #default="scope">
                  <el-input v-model="scope.row.email" />
                </template>
              </el-table-column>

              <el-table-column prop="address" label="Address">
                <template #default="scope">
                  <el-input v-model="scope.row.address" />
                </template>
              </el-table-column>


              <el-table-column label="Operation">
                <template #default="scope">
                  <div class="d-center">
                    <el-button size="mini" type="text" icon="Plus" @click="addItem()" />
                    <el-button size="mini" type="text" icon="Delete" @click="deleteItem(scope.$index)" />
                  </div>
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t("ship.button.cancel") }}</el-button>
        <el-button @click="resetForm" type="warning">{{ $t("ship.button.reset") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("ship.button.submit") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElNotification } from "element-plus";
import { emit } from "process";
import service from "@/utils/request";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["refreshTable"])

const statuss = ["UnApprove", "Approve", "Reject"];
const custForm = ref(null);
const initForm = {
  title: 'Add Supplier',
  supplierId: null,
  fullName: null,
  supplierCode: null,
  supplierType: null,
  phone: null,
  email: null,
  fax: null,
  state: null,
  postAddress: null,
  postState: null,
  postZipCode: null,
  postCountry: null,
  visitAddress: null,
  visitState: null,
  visitZipCode: null,
  invoiceAddress: null,
  visitCountry: null,
  invoiceZipCode: null,
  invoiceState: null,
  invoiceCountry: null,
  contacts: <any>[],
  roleType: null
};
let isAdd = false;
const dialogTitle = ref("Add Supplier");
const formParam = ref();
const mailValid = (rule, value, callback) => { 
  if (!value) {
    callback();
  } else {
    const emailPattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
    //if (!/^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/.test(value)) 
    if(!emailPattern.test(value))
    {
      callback(new Error("The email format is illegal!"));
    } else {
      callback();
    }
  }
};
const rules = ref({
  email: [{ trigger: "blur", validator: mailValid }]
});
 
const show = (data: any) => {
  dialogFormVisible.value = true;
  !data ? isAdd = true : isAdd = false
  if (isAdd) {
    dialogTitle.value = "Add Supplier";
    formParam.value=Object.assign({},initForm); 
  } else {
    dialogTitle.value = "Update Supplier"; 
    isAdd = false
    formParam.value =  Object.assign({},data);  
  }
 
};
const addContact = () => {
  formParam.value.contacts.push({
    name: null,
    phone: null,
    email: null,
    title: null
  });
};

const deleteItem = (index: Number) => {
  formParam.value.contacts.splice(index,1)
};
 
const addItem = ()=>{
  addContact()
}

defineExpose({
  show
});
const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};
const dialogFormVisible = ref(false);
const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async valid => {
    if (!valid) {
      return;
    }

    await service[isAdd ? "post" : "put"]("shipping/supplier",  formParam.value);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    emit('refreshTable')
    formParam.value = Object.assign({}, initForm)
    dialogFormVisible.value = false;
  });
};
let countrys = ref([] as any);
let orgnization_type = reactive([])
onMounted(async () => {
  let result = await service.get("/shipping/country/list");
  if (result) {
    countrys.value = result.data;
  }

  const res = await proxy.useDict("orgnization_type");
  orgnization_type = res.orgnization_type
});

</script>
<style scoped lang="scss">
.card-content {
  .address-input {
    width: 100%;
    background: #fff;
  }
}
</style>
